<template>
  <div class="tag">
    <h1>订单物流状态</h1>
    <el-table
      ref="filterTable"
      :data="
        tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      style="width: 100%"
    >
      <el-table-column
        prop="date"
        label="订单日期"
        sortable
        width="180"
        column-key="date"
        :filters="[
          { text: '2022-05-01', value: '2022-05-01' || '2022-06-28' },
          { text: '2022-12-26', value: '2022-12-26' },
          { text: '2022-02-01', value: '2022-02-01' },
          { text: '2022-11-11', value: '2022-11-11' },
        ]"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column prop="ID" label="订单编号"> </el-table-column>
      <el-table-column prop="name" label="客户姓名" width="180" class="name">
      </el-table-column>
      <el-table-column
        prop="address"
        label="发货地址"
        :formatter="formatter"
        class="address"
      >
      </el-table-column>
      <el-table-column prop="company" label="快递公司"> </el-table-column>
      <el-table-column
        prop="tag"
        label="物流状态"
        width="100"
        :filters="[
          { text: '已发货', value: '已发货' },
          { text: '未发货', value: '未发货' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '未发货' ? 'danger' : 'success'"
            disable-transitions
            >{{ scope.row.tag }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="tgs" label="签收状态" width="100">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tgs === '未签收' ? 'danger' : 'success'"
            disable-transitions
            >{{ scope.row.tgs }}</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->

    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import api from "../../api/index";

export default {
  name: "",
  components: {},
  data() {
    return {
      tableData: [],
      currentIndex: "",
      currentPage: 1, //初始页
      pagesize: 10, //
    };
  },

  methods: {
    handleSizeChange: function (size) {
      this.pagesize = size;
      // console.log(this.pagesize) //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage) //点击第几页
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
  },
  created() {
    api.norms.getOrderData().then((res) => {
      this.tableData = res.data;
    });
  },
};
</script>

<style scoped lang="less">
.tag {
  .name {
    margin-left: 100px;
  }
  .address {
    margin: 100px;
  }
  h1 {
    font-size: 30px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
  }
}
</style>
